/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    TouchableHighlight,
    ScrollView,
} from 'react-native';

// import ModalDropdown from 'react-native-modal-dropdown';
import ModalDropdown from 'react-native-modal-dropdown';

const area = ['黄浦', '浦东', '徐汇', '长宁'];
const distance = ['黄浦', '浦东', '徐汇', '长宁'];
const price = ['100', '200', '300', '400'];
const type = ['1居', '2居', '3居', '4居'];


export default class ModalDropdowns extends Component {

  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
        <View style={styles.container}>
          <View style={styles.row}>
            <View style={styles.cell}>
              <ModalDropdown
                  defaultValue="区域"
                  dropdownStyle={styles.area_dropdown}
                  style={styles.selectComm}
                                options={area}
            />
              <ModalDropdown
                  defaultValue="距离"
                  dropdownStyle={styles.area_dropdown}
                  style={styles.selectComm}
                             options={distance}
              />
              <ModalDropdown
                  defaultValue="价格"
                  dropdownStyle={styles.area_dropdown}
                  style={styles.selectComm}
                             options={price}
              />
              <ModalDropdown
                  defaultValue="户型"
                  dropdownStyle={styles.area_dropdown}
                  style={styles.selectComm}
                             options={type}
              />

            </View>

          </View>





        </View>
    );
  }

}
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    row: {
      flex: 1,

    },
    cell: {
      flex: 1,
      flexDirection: 'row',
      justifyContent:'center',
      alignItems:'center',


    },

    selectComm: {
      flex: 1,
      fontSize:18,
      marginLeft:30

    },

  });
